<template>
  <el-table :data="ccTreeGridData" :row-style="showRow" :row-key="treeKey" ref="treeGrid">
    <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.prop" :align="item.align" :width="item.width">
      <template slot-scope="{row, $index}">

        <div v-if="item.prop === treeColumn">
          <!--存在子节点-->
          <section v-if="row[KeySymbol.hasChildrenSymbol]">
            <template v-for="space in row[KeySymbol.levelSymbol]">
              <span class="el-icon-arrow-right" :key="space"></span>&nbsp;
            </template>
            <span @click="toggleExpanded(row)">
              <i v-if="!row[KeySymbol.expandedSymbol]" class="el-icon-caret-right expandable"></i>
              <i v-else class="el-icon-caret-bottom expandable"></i>
            </span>
            <span>{{row[item.prop]}}</span>
          </section>

          <section v-else>
            <template v-for="space in row[KeySymbol.levelSymbol] ">
              <span class="el-icon-arrow-right" :key="space"></span>&nbsp;
            </template>
            <span class="el-icon-arrow-right"></span>
            <span>{{row[item.prop]}}</span>
          </section>
        </div>
        <div v-else>
          {{row[item.prop]}}
        </div>
      </template>
    </el-table-column>
    <slot>

    </slot>
  </el-table>
</template>

<script>

import treeToTable from './treeToTableData'
import KeySymbol from './keySymbol'
import removeRow from './removeRow'
import insertRow from './insertRow'
import updateRow from './updateRow'
import values from './values'
import expandedKeysParent from './expandedKeysParent'

export default {
  name: "ccTreeGrid",
  props: {
    data: Array,

    //列
    columns: {
      type: Array,
      required: true,
    },
    //树形列
    treeColumn: {
      type: String,
      required: true,
    },
    //关键列
    treeKey: {
      type: String,
      required: true,
    },
    //展开的行
    expandedKeys: {
      default() {
        return []
      },
      type: Array,
    }
  },
  watch: {
    data(value) {
      this.ccTreeGridData = treeToTable(value);
    },
    expandedKeys(value) {
      this.expandedKeysHandler(value);
    }
  },
  data() {
    return {
      ccTreeGridData: [],
      KeySymbol
    }
  },
  computed: {

  },
  methods: {
    /**
     * 展开, 关闭
     * @param {Object} row
     */
    toggleExpanded(row) {
      row[KeySymbol.expandedSymbol] = !row[KeySymbol.expandedSymbol];
      this.refresh();
    },

    /**
     * 显示的行
     */
    showRow({ row }) {

      const parentRow = this.ccTreeGridData.find(item => {
        return item[KeySymbol.rowIdSymbol] === row[KeySymbol.parentIdSymbol];
      });

      if (parentRow) {
        // 如果父级展开, 则当前行显示
        if (parentRow[KeySymbol.expandedSymbol]) {
          row[KeySymbol.showSymbol] = true;
        } else {
          // 如果父级关闭, 则当前行隐藏
          row[KeySymbol.showSymbol] = false;
          if (row[KeySymbol.hasChildrenSymbol]) {
            // 如果存在子元素, 当前行关闭 
            row[KeySymbol.expandedSymbol] = false;
          }
        }
        return row[KeySymbol.showSymbol] ? '' : 'display:none';
      }
    },
    /**
     * 默认展开行处理
     * @param {Array} expandedKeys
     */
    expandedKeysHandler(expandedKeys) {
      let keys = [];
      if (expandedKeys.length) {
        keys = expandedKeysParent(expandedKeys, this.ccTreeGridData, { treeKey: this.treeKey });
      }
      keys && this.ccTreeGridData.forEach(item => {
        if (keys.includes(item[this.treeKey]) && item[KeySymbol.expandedSymbol] === false) {
          item[KeySymbol.expandedSymbol] = true;
        }
      });
      console.log(this.ccTreeGridData);
    },
    /**
     * 更新行
     * 
     * @param {*} rowKey
     * @param {Object} newRowData
     */
    updateRow(rowKey, newRowData) {
      updateRow(rowKey, newRowData, this.ccTreeGridData, { treeKey: this.treeKey })
    },
    /**
     * 移除行
     * 
     * @param {*} rowKey
     */
    removeRow(rowKey) {
      removeRow(rowKey, this.ccTreeGridData, { treeKey: this.treeKey });
    },
    /**
     * 插入行
     * 
     * @param parentRowKey
     * @param row
     * @param {Number} position 插入位置, 可选, 默认插入末尾
     */
    insertRow(parentRowKey, row, position) {
      insertRow(parentRowKey, row, position, this.ccTreeGridData, { treeKey: this.treeKey })
    },

    /**
     * 刷新
     **/
    refresh() {
      this.ccTreeGridData.splice(0, 0);
    },
    /**
     * 获取值, 树形结构
     */
    values() {
      return values(this.ccTreeGridData);
    },
    /**
     * 获取展开的keys
     */
    getExpandedKeys() {
      let keys = [];
      this.ccTreeGridData.forEach(item => {
        if (item[KeySymbol.expandedSymbol] === true) {
          keys.push(item[this.treeKey]);
        }
      });
      return keys;
    }
  },
  mounted() {
    // this.ccTreeGridData = treeToTable(this.data);
    // this.expandedKeysHandler(this.expandedKeys);
  }
}
</script>

<style lang="less" scoped>
@import "./index.less";
</style>

